<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单例弹出层</title>

</head>

<body style="background-color:#e8e8e8 ;">
    <style type="text/css">
        @keyframes move {
            0% {
                transform: translate(-400px, 0);
            }
            50% {
                transform: translate(-200px, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div.dialog {
            width: 400px;
            height: 230px;
            display: flex;
            flex-direction: column;
            border: 1px solid #333;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
            transition: opacity 0.5s linear;
            opacity: 1;
            border-radius: 4%;
            overflow: hidden;
            /* box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; */
            box-shadow: 3px 22px 35px 4px rgba(0, 255, 117, 0.30);
        }
        
        .active {
            animation: move 1s linear 0s 1 alternate backwards;
        }
        
        .dialog>.top,
        .dialog>.bottom {
            width: 100%;
            height: 40px;
            background-color: skyblue;
            box-sizing: border-box;
            line-height: 40px;
            padding-left: 20px;
            position: relative;
        }
        
        .dialog>.top>span {
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 30px;
        }
        
        .dialog>.content {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        /* From uiverse.io by @barisdogansutcu */
        
        button {
            margin: 10px auto;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 170px;
            border-radius: 50px;
            border-width: 0;
            background-color: black;
            color: white;
            font-size: 16px;
            letter-spacing: 3px;
            position: relative;
            overflow: hidden;
        }
        
        span {
            position: relative;
            z-index: 99;
        }
        
        .line,
        .line-2 {
            position: absolute;
            width: calc(100% - 20px);
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 1px;
            border-radius: 100%;
            background-color: hsla(240, 100%, 50%, 0.39);
            bottom: 5px;
            animation: line .5s infinite linear;
            box-shadow: 0 0 10px 2px rgb(0, 60, 255);
            z-index: 9;
        }
        
        @keyframes line {
            0% {
                height: 1px;
                background-color: hsla(240, 100%, 50%, 0.285);
            }
            50% {
                transform: scaleY(5);
                background-color: hsla(0, 59%, 41%, 0.032);
                box-shadow: 0 0 100px 20px rgb(0, 60, 255);
            }
            100% {
                height: 2px;
                background-color: rgb(255, 255, 255)
            }
        }
        
        .line-2 {
            animation: line-2 .5s infinite linear;
            bottom: 1px;
            box-shadow: 0 0 10px 2px rgb(0, 60, 255);
        }
        
        @keyframes line-2 {
            0% {
                height: 1px;
                background-color: hsl(327, 100%, 50%);
            }
            50% {
                height: 2px;
                background-color: hsl(0, 0%, 85%)
            }
            100% {
                height: 2px;
                background-color: rgb(255, 255, 255)
            }
        }
        
        .speak {
            position: absolute;
            width: 330px;
            height: 10px;
            background-color: pink;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 100%;
            animation: speak .8s infinite linear;
        }
        
        .speak.one {
            left: calc(50% + 20px);
            animation: speak 6s infinite linear;
            background-color: hsl(284deg 79% 55%);
        }
        
        .speak.two {
            left: calc(50% + 10px);
            animation: speak .6s infinite linear;
            background-color: hsl(284deg 79% 55%);
        }
        
        .speak.two {
            left: calc(50% + -10px);
            animation: speak .6s infinite linear;
            background-color: rgb(0, 255, 149);
        }
        
        @keyframes speak {
            0% {
                transform: translateX(-50%) scale(.10);
            }
        }
        
        img {
            width: 16px;
            height: 16px;
        }
        
        img:hover {
            background-color: gray;
            /* border: 0px solid #000;
            border-radius: 50%; */
        }
    </style>
    <!-- <div class="dialog">
      <div class="top">
        提示
        <span> X </span>
      </div>

      <div class="content">内容</div>
      <div class="bottom"></div>
    </div> -->

    <button>
      <span>点我出现弹出层</span>
      <div class="line"></div>
      <div class="line-2"></div>
      <div class="speak"></div>
      <div class="speak one"></div>
      <div class="speak two"></div>
      <div class="speak three"></div>
    </button>
    <script>
        /*
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                自定义弹出层
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    +约定
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        1.提示 skyblue info
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        2.警告 yellow warning
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        3.危险 red danger
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        4.成功 green success
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
        //以单例模式书写 自定义弹出层

        const Dialog = (function() {
            //类 本身
            class Dialog {
                constructor() {
                        //1.创建一个div
                        this.box = document.createElement("div");
                        //加类名
                        this.box.className = "dialog";

                        //插入页面中
                        document.body.appendChild(this.box);
                        //2. 设置div 结构和内容
                        this.setHtml("skyblue", "我是默认的文本内容", "提示");
                        //3. 事件绑定
                        this.setEvent();
                    }
                    //设置
                setHtml(color, text, info) {
                        this.box.innerHTML = `
                <div class="top" style="background-color:${color};">
                    ${info}
                    <span><img src ='./叉号.png'></span>
                </div>
                <div class="content">${text}</div>
                <div class="bottom" style="background-color:${color};"></div>
                `;
                        this.box.style.display = "flex";
                        this.box.classList.add('active');
                    }
                    //处理关闭
                setEvent() {
                    this.box.addEventListener("click", (e) => {
                        //兼容性处理
                        e = e || window.event;
                        const t = e.target || e.srcElement;
                        if (t.nodeName === "IMG") {

                            this.box.style.opacity = '0';
                            // this.box.style.display = "none";
                        }
                        this.box.classList.remove('active')
                        btn.disabled = false;


                    });
                }
            }
            //单例的核心
            let instance = null;
            return function(text, color) {
                if (!instance) instance = new Dialog();

                //通过switch来判断color单词 来添加不同的文本，背景色
                switch (color) {
                    case "danger":
                        instance.setHtml("red", '危险操作，请停止该行为。', "危险");
                        break;
                    case "success":
                        instance.setHtml("green", '恭喜你成功了，完美！', "成功");
                        break;
                    case "warning":
                        instance.setHtml("yellow", '警告警告警告警告，你在步入危险的深渊。', "警告");
                        break;
                    default:
                        instance.setHtml("skyblue", '请跟随教程操作。', "提示");
                }
                return instance;
            };
        })();
        const btn = document.querySelector("button");

        btn.addEventListener("click", () => {

            let arr = ["", "success", 'danger', 'warning'];
            //Math.random产生0～3的随机数
            let res = arr[Math.floor(Math.random() * arr.length)];
            console.log(res);

            const d1 = new Dialog("", res);
            const box = document.querySelector('.dialog');

            box.style.opacity = '1';
            btn.disabled = true;


        });
    </script>
</body>

</html>